<template>
	<view class="graphic_list">
		<view class="graphic_list_item" :class="itemClass">
			<view class="graphic_text_box">{{text}}</view>
			<view class="graphic_img_box">
				<image v-for="(item,index) in img" :key="index" :src="item" mode=""></image>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	/*
		itemClass属性:
			item_left_text 左文字右图
			item_left_img  左图右文字
			bottom_img_3   底部三张图
			''			   为大图
	*/
	props:{
		itemClass:{	
			type:String,
			default:''
		},
		text:{
			type:String,
			default:'',
		},
		img:{
			type:[Array],
		}
	},
    data() {
	  return {

	  }
	},
	methods:{

	},
	mounted() {
	}
}
</script>
<style lang="scss" scoped>
.graphic_list {
	background: #fff;
	padding: 10px 15px;

	.item_left_text,
	.item_left_img {
		display: flex;
		.graphic_text_box {
			flex: 1;
		}
		.graphic_img_box {
			width: 120px;
			height: 70px;
			margin-left: 10px;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.item_left_img {
		.graphic_img_box {
			order: 1;
			margin: 0;
			margin-right: 10px;
		}
		.graphic_text_box {
			order: 2;
		}
	}
	.graphic_text_box {
		font-size: 14px;
		color: #555;
		margin-bottom: 10px;
	}
	.bottom_img_3 {
		.graphic_img_box {
			display: flex;
			justify-content: space-between;
			image {
				width: 30%;
				height: 80px;
			}
		}
	}
}
</style>
